<template>
  <d2-container>
    <el-tabs type="card">
    <el-tab-pane label="部门信息">
    <el-main>

      <el-form ref="departmentForm" :model="departmentForm" label-width="80px" label-position="left"
               :rules="formRules">

        <el-form-item label="部门名称" prop="name">
          <el-input placeholder="请输入与部门名称" v-model="departmentForm.name" :disabled="disabled"></el-input>
        </el-form-item>


        <el-form-item label="部门描述" prop="description">
          <el-input placeholder="请输入部门描述" v-model="departmentForm.description" :disabled="disabled"></el-input>
        </el-form-item>


        <el-form-item label="所属校区" prop="school">
          <el-select
                  v-model="departmentForm.school"
                  filterable
                  :disabled="disabled"
          >
            <el-option v-for="item in schoolList" :key="item._id" :label="item.name" :value="item._id"></el-option>
          </el-select>
        </el-form-item>

      </el-form>
    </el-main>
    <el-footer style="text-align: center">
      <el-button type="primary" @click="submit">提交</el-button>
      <el-button @click="edit" v-show="editShow">修改</el-button>
    </el-footer>
  </el-tab-pane>
  <el-tab-pane label='部门员工'>
       <el-main>
                    <div>
                        <h3 style="display: inline-block;">部门员工列表</h3>
                    </div>

                    <div >
                    <el-button
                            @click="selectStaff = true"
                            style="float:left;margin:10px"
                            icon="el-icon-plus"
                            size="small"
                            type="primary"
                            >
                        添加员工
                    </el-button>
                    <el-dialog title="员工列表" :visible.sync="selectStaff">
                        <el-input placeholder="请输入员工姓名" v-model="searchStaffName" size="small">
                            <el-button slot="append" icon="el-icon-search" @click="searchStaff"></el-button>
                        </el-input>
                        <el-table :data="staffList">
                            <el-table-column property="name" label="员工姓名"></el-table-column>
                            <el-table-column fixed="right" label="操作">
                                <template slot-scope="scope">
                                    <el-button @click="addStaff(scope.row)" type="text">选择</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div slot="footer" class="dialog-footer">
                            <el-button type="primary" @click="selectStaff = false">关闭</el-button>
                        </div>

                    </el-dialog>
                </div>

                    <el-table :data="department_staff" border style="width: 100%;">
                        <el-table-column prop="name" label="姓名"></el-table-column>
                        <el-table-column prop="position.name" label="职位"></el-table-column>
                        <el-table-column prop="gender" label="性别"></el-table-column>

                        <el-table-column fixed="right" label="操作">
                            <template slot-scope="scope">
                                <el-button @click="handleStaffDetailClick(scope.row)" type="text" size="normal"
                                           style=''>查看
                                </el-button>
                                <el-button @click="handleStaffRemoveClick(scope.row)" type="text" size="normal"
                                           style=''>删除
                                </el-button>
                                <div></div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-main>
  </el-tab-pane>
</el-tabs>
  </d2-container>
</template>

<script>
// import { request } from "http";
import request from "@/plugin/axios";
import { constants } from "crypto";
import {mapState} from "vuex";

export default {
  data() {
    return {
      id : undefined,
      formRules: {
        name: [
          {required: true, message: '请输入部门', trigger: 'blur'},
          {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
        ],
       
        school: [
          {required: true, message: '请选择所在校区', trigger: 'change'}
        ]


      },

      departmentForm:{
        school:undefined,
        name:undefined,
        description: undefined,
      },
      editShow: false,
      disabled: false,
      schoolList:[],
      school : undefined,
      department_staff : [],
      selectStaff : undefined,
      searchStaffName : undefined,
      staffList : [],
      searchStaffCount : undefined

    };
  },
  computed: {
    ...mapState('d2admin/user', ['info']),
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    submit() {
      let data = {};
      data.name = this.departmentForm.name
      data.school = this.departmentForm.school
      var url = ''
      if (this.id == undefined){
          url = "/department/addDepartment";
      }
      else{
        url = "/department/updateDepartment";
        data.id = this.id
      }
      data.description = this.departmentForm.description
      request({
        url: url,
        method: "post",
        data
      }).then(res => {
        if (res.code == 200) {
          this.$router.push({path: "/department-list"})
          this.$alert("", "提交成功", {
            confirmButtonText: "确定"
          });
        }
        // 返回数据
      });
    },
    edit() {
      this.disabled = false;
    },
    getSchoolList() {
      this.schoolList = this.info.school;

      this.departmentForm.school = this.schoolList[0]._id;
      //零时修正
      if (this.info.role.indexOf('root') > -1) {
        this.departmentForm.school = this.schoolList[1]._id;
      }

    },

    handleStaffDetailClick(e){
      this.$router.push("/staff-detail?id=" + e._id)
    },

    getDepartment(){
      let url = '/department/getDepartment'
      let data = {}
      data.id = this.id
      data.school = this.school
      request({
        url : url,
        method :'post',
        data
      }).then(res=>{
        if (res.code == 200){
          this.departmentForm = res.data
        }
      })
    },
    getStaffList(page) {
                request({
                    url: "/staff/getStaffList",
                    method: "post",
                    data: {
                        page: page,
                        pageSize: 1000,
                        name: this.searchStaffName,
                        school: this.school
                    }
                }).then(res => {
                  
                    this.staffList = res.data.staff;
                    this.searchStaffCount = res.data.count;

                });
            },
            searchStaff() {
              this.selectStaff = true
                this.getStaffList(1);
            },

          addStaff(e){
                // modal 
                this.$confirm("此操作将添加该员工到本部门, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                  })
                    .then(() => {
                      request({
                        url: "/department/addStaffToDepartment",
                        method: "post",
                        data: { id: e._id,departmentID : this.id }
                      }).then(res => {
                        if (res.code == 200) {
                          this.$message({
                            message: "添加成功"
                          });
                          this.getDepartmentStaffList();
                        }
                      });
                    })
                    .catch(() => {
                      this.$message({
                        type: "info",
                        message: "已取消操作"
                      });
                    });

            },
        handleStaffRemoveClick(e){
                // modal 
                this.$confirm("此操作将该员工从本部门删除, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                  })
                    .then(() => {
                      request({
                        url: "/department/removeStaffFromDepartment",
                        method: "post",
                        data: { id: e._id,departmentID : this.id }
                      }).then(res => {
                        if (res.code == 200) {
                          this.$message({
                            message: "删除成功"
                          });
                          this.getDepartmentStaffList();
                        }
                      });
                    })
                    .catch(() => {
                      this.$message({
                        type: "info",
                        message: "已取消操作"
                      });
                    });

            },

          getDepartmentStaffList() {
                request({
                    url: "/staff/getStaffList",
                    method: "post",
                    data: {department:this.id,school:this.school}
                }).then(res => {
                    if (res.code == 200) {
                        this.department_staff = res.data.staff
                        this.department_staff.forEach((value, index) => {
                            this.department_staff[index].gender = value.gender === 0 ? '男' : '女'
                        })
                    }

                });
            },
  },
  created() {
        this.school = this.info.school[0]._id

    if (this.$route.query.id != undefined) {
      this.editShow = true;
      this.disabled = true;
      this.id = this.$route.query.id
      this.getDepartment()
      this.getDepartmentStaffList()
    }
    this.getSchoolList();
  }
};
</script>
